/*
    给各个内部元素使用的样式
*/

/* 给每行歌词应用的样式 */
.lyricLine {
	position: absolute;
	backface-visibility: hidden;
	transform-origin: left;
	width: var(--amll-lp-width, 100%);
	min-width: var(--amll-lp-width, 100%);
	max-width: var(--amll-lp-width, 100%);
	width: 100%;
	height: fit-content;
	padding: 0.5em 1em;
	contain: content;
	will-change: transform;
	transition:
		opacity 0.25s,
		filter 0.2s,
		background-color 0.25s,
		box-shadow 0.25s;
	box-sizing: border-box;
	border-radius: 0.25em;

	padding-left: 1em;
	padding-right: 1em;

	@media screen and (max-width: 500px) {
		padding-left: 20px;
		padding-right: 20px;
	}

	&.dirty {
		opacity: 0;
		visibility: hidden;
	}

	&:has(> *):hover {
		background-color: var(--amll-lp-hover-bg-color, #fff1);
		/* box-shadow: 0 0 0 4px var(--amll-lp-hover-bg-color, #fff1); */
	}

	&:has(> *):active {
		background-color: var(--amll-lp-hover-bg-color, #ffffff05);
		/* box-shadow: 0 0 0 var(--amll-lp-hover-bg-color, #fff1); */
	}
}

.lyricBgLine {
	opacity: 0.0001;
	font-size: max(calc(1em * var(--amll-lp-bg-line-scale, 0.7)), 10px);
	transition:
		opacity 0.25s,
		scale 0.5s,
		filter 0.2s,
		background-color 0.25s,
		box-shadow 0.25s;
	/* 因为字体大小缩小了，故内边距要和主行字体大小统一，行边距计算公式为 100% / font-size 转 em 单位 */
	padding: 1vh calc(var(--amll-lp-line-padding-x, 1em) / var(--amll-lp-bg-line-scale, 0.7));

	&.active {
		transition:
			opacity 0.5s 0.25s,
			scale 1.5s cubic-bezier(0, 1, 0, 1) 0.25s,
			filter 0.2s,
			background-color 0.25s,
			box-shadow 0.25s;
		opacity: 0.4;
	}
}

:global(.amll-lyric-player) {
	&:hover .lyricLine {
		filter: unset !important;
	}

	&.hasDuetLine {
		.lyricLine:not(.lyricDuetLine) {
			padding-right: 15%;
		}

		.lyricDuetLine {
			padding-left: 15%;
		}
	}

	&:not(:global(.playing))>.lyricBgLine {
		opacity: 0.4;
	}
}

.lyricDuetLine {
	text-align: right;
	transform-origin: right;
}

.lyricMainLine {
	transition: opacity 0.3s 0.1s;
	margin: -1em;
	padding: 1em;

	& span {
		display: inline-block;
	}
	
	.romanWord {
		font-size: 0.5em;
		line-height: 1em;
	}

	&>span,
	span.emphasizeWrapper {
		white-space: pre-wrap;
		display: inline-block;
		padding: 1em;
		margin: -1em;
		will-change: transform;

		&.emphasize,
		span.emphasize {
			padding: 1em;
			margin: -1em;
			backface-visibility: hidden;

			&>span {
				padding: 1em;
				margin: -1em;
				will-change: transform;
				backface-visibility: hidden;
			}
		}
	}
}

.lyricSubLine {
	font-size: max(0.5em, 10px);
	line-height: 1.5em;
	transition: opacity 0.2s 0.25s;
	opacity: 0.3;
}

.disableSpring>* {
	transition:
		filter 0.25s,
		transform 0.5s,
		background-color 0.25s,
		box-shadow 0.25s;
}

.interludeDots {
	height: clamp(0.5em, 1vh, 3em);
	transition: opacity 0.25s;
	transform-origin: center;
	width: fit-content;
	padding: 2.5% 0.75em;
	position: absolute;
	display: flex;
	gap: 0.25em;
	left: 0;
	opacity: 0;

	&.enabled {
		opacity: 1;
	}

	&>* {
		width: clamp(0.5em, 1vh, 3em);
		height: clamp(0.5em, 1vh, 3em);
		display: inline-block;
		border-radius: 50%;
		aspect-ratio: 1 / 1;
		background-color: var(--amll-lp-color, white);
		margin-right: 4px;
	}

	&.duet {
		right: 0;
		transform-origin: center;
	}
}

@supports (mix-blend-mode: plus-lighter) {
	.lyricSubLine {
		opacity: 0.3;
	}
}

.tmpDisableTransition {
	transition: none !important;
}